<template>
	<view class="flex-col page">
		<view class="flex-col section_1">
			<!-- <view class="justify-center group">
        <image
          src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b127f6d029820011531bae/16557836621783633159.png"
          class="image"
        />
        <text class="text">订单详情</text>
      </view> -->
			<view class="justify-between group_1">
				<view class="flex-col items-start group_2">
					<text class="text_1">订单{{orderStatus[order_info.ordersStatus]}}</text>

					<text class="text_2"
						v-if="order_info.ordersStatus==1">剩余时间：{{ timeData.hours>10?timeData.hours:'0'+timeData.hours}}:{{ timeData.minutes >10? timeData.minutes:'0'+timeData.minutes}}:{{ timeData.seconds }}</text>
					<!-- <text class="text_2">剩余时间： <u-count-down :time="30 * 60 * 60 * 1000" format="HH:mm:ss" ></u-count-down></text> -->
					<u-count-down :time="newtimes" format="DD:HH:mm:ss" autoStart millisecond @change="onChange"
						v-show="false" />
				</view>
				<image
					src="https://project-user-resource-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b127f6d029820011531bae/16557852713734058034.png"
					class="image_1" />
			</view>
		</view>
		<view class="flex-col group_3">
			<view class="flex-col section_2">
				<view class="flex-row">
					<view class="section_3 view_2">
						<!--*-->
					</view>
					<text class="text_3">全流程管家订单</text>
				</view>
				<view class="justify-between group_5">
					<text class="text_4">你的房屋位置</text>
					<text
						class="text_5">{{order_info.cityName}}{{order_info.districtName}}{{order_info.position}}</text>
				</view>
				<view class="justify-between group_6">
					<text class="text_6">你的房屋面积</text>
					<text class="text_7">{{order_info.roomArea}}m²</text>
				</view>
				<view class="justify-between group_7">
					<text class="text_8">房屋类型</text>
					<text class="text_9">{{order_info.roomTypeName}}</text>
				</view>
			</view>
			<view class="flex-col section_4">
				<view class="flex-row group_8">
					<view class="section_3 view_2">
						<!--*-->
					</view>
					<text class="text_10">服务内容</text>
				</view>
				<text class="text_11 text_12">
					为业主提供专业细致的单项验收服务（一次性）按类选择分：毛坯房验收、水电验收、硬装验收（中期验收）、全屋精装（竣工）验收。
				</text>
				<text class="text_11">
					为业主提供专业细致的单项验收服务（一次性）按类选择分：毛坯房验收、水电验收、硬装验收（中期验收）、全屋精装（竣工）验收。
				</text>
				<text class="text_11">
					为业主提供专业细致的单项验收服务（一次性）按类选择分：毛坯房验收、水电验收、硬装验收（中期验收）、全屋精装（竣工）验收。
				</text>
				<view class="flex-col group_9">
					<view class="justify-between">
						<text class="text_15">总额</text>
						<text class="text_16">￥{{order_info.totalMoney}}</text>
					</view>
					<view class="flex-col group_11">
						<view class="justify-between group_12" v-if="order_info.couponsMoney>0">
							<text class="text_17">优惠券</text>
							<text class="text_18">-￥{{order_info.couponsMoney}}</text>
						</view>

						<view class="justify-end group_13">
							<text class="text_19">应付款:</text>
							<view class="group_14">
								<text class="text_20">￥</text>
								<text class="text_21">{{order_info.payableMoney}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="flex-col section_5">
				<view class="flex-row group_15">
					<view class="section_3 view_2">
						<!--*-->
					</view>
					<image
						src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b127f6d029820011531bae/16557836621826750433.png"
						class="image_2" />
				</view>
				<view class="flex-col group_16">
					<view class="flex-row">
						<text class="text_22">订单编号</text>
						<text class="text_23">{{order_info.ordersNumber}}</text>
						<text class="text_23 copy" style="color: #1c4ca8;font-family:.AppleSystemUIFont;font: size 12px;"
							@click="copys">复制</text>
					</view>

					<view class="c1" style="height: 12rpx;"></view>
					<view class="flex-row group_18">
						<text class="text_25">下单时间</text>
						<text class="text_26">{{order_info.ordersTime}}</text>
					</view>
					<view class="flex-row group_18" v-if="order_info.ordersStatus !=1">
						<text class="text_25">付款金额</text>
						<text class="text_26 text-price">￥{{order_info.totalMoney}}</text>
					</view>
					<view class="flex-row group_18" v-if="order_info.ordersStatus!=1">
						<text class="text_25">支付方式</text>
						<text class="text_26" v-if="order_info.payType == 1">微信支付</text>
						<text class="text_26" v-else>支付宝支付</text>
					</view>
					<view class="flex-row group_18" v-if="order_info.ordersStatus!=1">
						<text class="text_25">支付时间</text>
						<text class="text_26">{{order_info.payTime}}</text>
					
					</view>
				</view>
			</view>
		</view>
		<view class="justify-between section_6">
			<view class="flex-row group_19" @click="go('/pages/my/message/kefu')">
				<image :src="imgUrl+'16557836621862755728.png'" class="image_3" />
				<text class="text_27">联系客服</text>
			</view>
			<view class="flex-row">
				<view class="flex-col items-center text-wrapper" v-if="order_info.ordersStatus==1" @click="cancel"><text
						class="text_28">取消订单</text></view>
				<view class="flex-col items-center image-wrapper" v-if="order_info.ordersStatus==1" @click="togos()">
					<text class="u-font-26 word">去付款</text>

				</view>
				<view class="flex-col items-center image-wrapper" v-if="order_info.ordersStatus==4"
					@click="tocomments(order_id)">
					<text class="u-font-26 word">评价</text>
				</view>
				<!-- <view class="flex-col items-center image-wrapper" v-if="(order_info.ordersStatus==2 || order_info.ordersStatus==3) && !inquiry "  @click="go('/pages/consult/inquiry?orderid='+order_id)">
		  <text class="u-font-26 word" >主材咨询</text>
		</view>
		<view class="flex-col items-center image-wrapper" v-if="(order_info.ordersStatus==2 || order_info.ordersStatus==3) && (inquiry && inquiry.status == 3)"  @click="go('/pages/consult/inquiry?orderid='+order_id)">
		  <text class="u-font-26 word" >继续咨询</text>
		</view> -->
			<cancelOrder :show="cancelShow" @close="cancelShow = false" @confirm="confirm"></cancelOrder>
			</view>
		</view>
	</view>
</template>

<script>
	import orderStatus from '@/static/js/order.js';
	import cancelOrder from "@/pages/my/order/cancelOrder.vue"
	
	export default {
		components: {
			cancelOrder
		},
		data() {
			return {
				cancelShow:false, //弹窗显示与隐藏
				imgUrl:this.$IMG_URL,
				order_id: '',
				order_info: {},
				consulting: {},
				timeData: {},
				newtimes: 0,
				minutes: '',
				inquiry: null,
				orderStatus: orderStatus.orderStatus
			};
		},
		onLoad(e) {
			this.order_id = e.ordersId
		},
		onPullDownRefresh() {
			console.log('rrrr');
			this.init();
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onShow() {
			this.init();
		},
		methods: {
			cancel(){
				this.cancelShow = true
			},
			confirm(v){
				// 点击弹窗确认按钮
				this.$http('mine.cancelOrdersL', {
					ordersId: this.order_id,
					cancelReason: v
				}).then(r => {
					console.log(r);
					if (r.code = 200) {
						// this.orders.splice(this.currentIndex, 1)
						this.cancelShow = false;
						setTimeout(() => {
							this.$u.toast('取消订单成功');
						})
						uni.navigateBack({
							delta:1
						})
						this.init()
					}
				});
			},
			init() {
				this.orderInfo();
				this.getNumber();
			},
			onChange(e) {
				// console.log(e.minutes)
				this.timeData = e
				this.minutes = e.minutes
			},
			getNumber() {
				this.$http('lorder.queryNumber', {
					ordersId: this.order_id
				}).then(r => {
					console.log(r);
				});
			},
			orderInfo() {
				this.$http('harryroom.viewWholeOrderDetails', {
					ordersId: this.order_id
				}).then(r => {
					console.log(r)
					if (r.code == 200) {
						this.order_info = r.data.orders
						console.log('订单信息',r.data.orders)
						this.consulting = r.data.consulting
						this.inquiry = r.data.inquiry;
						var order_time = this.timeProcessing(r.data.orders.ordersTime)
						this.newtimes = order_time + 86400000 - this.newtime()
					} else {
						this.$u.toast(r.msg);
					}
				});
			},
			tocomments(order_id) {
				this.go('/pages/my/evaluate/evaluate?ordersId=' + order_id);
			},
			copys() {
				var value =
					uni.setClipboardData({
						data: this.order_info.ordersNumber,
						success: (result) => {
							this.$u.toast('复制成功');
						},
						fail: (error) => {
							this.$u.toast('网络出错');
						}
					})
			},
			timeProcessing(e) {
				let timeDate = e;
				let Time = new Date(timeDate);
				// console.log(Time)//Mon Jun 24 2019 11:08:48 GMT+0800 (中国标准时间)
				let timestemp = Time.getTime();
				// console.log(timestemp)//1561345728000
				return timestemp
			},
			newtime() {
				let timestamp = new Date().getTime();
				// console.log('timestamp', timestamp) // timestamp 1630398573129  毫秒
				return timestamp;
			},
			togos() {
				
					this.go('/pages/pay/pay?orderid=' + this.order_id)
				
			}
		},

	};
</script>

<style scoped lang="scss">
	.items-center {
		align-items: center;
		justify-content: center;
	}
	.text-price {
		color: #fe641a;
	}
	.group_18 {
		margin-top: 35rpx;
	}
	.text_11 {
		margin-top: 58rpx;
		color: #666666;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
		text-align: left;
		text-indent: 37rpx;
	}

	.word {
		color: #ffffff;
	}

	.section_3 {
		margin-top: 12rpx;
		background-color: #1d6aff;
		border-radius: 3rpx;
		width: 6rpx;
		height: 28rpx;
	}

	.page {
		background-color: #f6f7f9ff;
		height: 100%;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
	}

	.section_1 {
		padding: 55rpx 24.5rpx 145.5rpx;
		background-image: url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b127f6d029820011531bae/16557836621628592893.png');
		background-position: 0% 0%;
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.group_3 {
		margin-top: -109rpx;
		padding: 0 24rpx 32rpx;
		position: relative;
	}

	.section_6 {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 18rpx 24rpx 18rpx 34rpx;
		/* padding: 40rpx 12rpx; */
		background-color: #ffffff;
		box-shadow: 0px -1rpx 0px 0px #eeeeee;
	}

	.group {
		padding: 0 7.5rpx 4rpx;
		position: relative;
	}

	.group_1 {
		margin-top: 43rpx;
	}

	.section_2 {
		padding: 30rpx 22rpx 40rpx 24rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
	}

	.section_4 {
		margin-top: 20rpx;
		padding-left: 24rpx;
		padding-right: 22rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
	}

	.section_5 {
		margin-bottom: 72rpx;
		margin-top: 20rpx;
		padding: 0 24rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
	}

	.group_19 {
		align-self: center;
	}

	.image {
		position: absolute;
		left: 7.5rpx;
		bottom: 0;
		width: 19rpx;
		height: 36rpx;
	}

	.text {
		color: #ffffff;
		font-size: 36rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 43rpx;
	}

	.group_2 {
		height: 50rpx;
	}

	.image_1 {
		margin-right: 35.5rpx;
		margin-top: 7.5rpx;
		filter: drop-shadow(0px 3rpx 3rpx #1a60e266);
		width: 80rpx;
		height: 76rpx;
	}

	.group_5 {
		margin-top: 38rpx;
	}

	.group_6 {
		margin-top: 31rpx;
	}

	.group_7 {
		margin-top: 25rpx;
	}

	.group_8 {
		padding: 29rpx 4rpx 32rpx;
		border-bottom: solid 1rpx #eeeeee;
	}

	.text_12 {
		margin-top: 24rpx;
	}

	.group_9 {
		margin-top: 65rpx;
		padding: 31rpx 0 30rpx;
		border-top: solid 1rpx #eeeeee;
	}

	.group_15 {
		padding: 28rpx 0 32rpx;
		border-bottom: solid 1rpx #eeeeee;
	}

	.group_16 {
		padding: 29rpx 0 34rpx;
	}

	.image_3 {
		flex-shrink: 0;
		width: 36rpx;
		height: 35rpx;
	}

	.text_27 {
		margin-left: 18rpx;
		margin-bottom: 8.5rpx;
		color: #191919;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 28rpx;
	}

	.text-wrapper {
		padding: 14rpx 0;
		background-color: #eeeeee;
		border-radius: 32rpx;
		width: 172rpx;
		height: 64rpx;
	}

	.image-wrapper {
		margin-left: 24rpx;
		// padding: 12rpx 0 ;
		background-color: #1d6aff;
		border-radius: 32rpx;
		width: 172rpx;
		height: 64rpx;
		line-height: 64rpx;
	}

	.text_1 {
		color: #ffffff;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 38rpx;
	}

	.text_2 {
		margin-top: 16rpx;
		color: #ffffff;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 28rpx;
	}

	.text_3 {
		margin-left: 18rpx;
		color: #333333;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 38rpx;
	}

	.text_4 {
		color: #666666;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.text_5 {
		margin-right: 3rpx;
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.text_6 {
		margin-bottom: 6rpx;
		color: #666666;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.text_7 {
		margin-top: 6rpx;
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.text_8 {
		color: #666666;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.text_9 {
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.text_10 {
		margin-left: 18rpx;
		color: #333333;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 38rpx;
	}

	.group_11 {
		margin-top: 33rpx;
	}

	.view_2 {
		margin-top: 8rpx;
	}

	.image_2 {
		margin-left: 17rpx;
		width: 132rpx;
		height: 40rpx;
	}

	.text_24 {
		margin-right: 267rpx;
		align-self: flex-end;
		color: #1c4ca8;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 28rpx;
	}

	.group_18 {
		margin-top: 9rpx;
	}

	.text_28 {
		color: #333333;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 28rpx;
	}

	.image_4 {
		width: 75rpx;
		height: 30rpx;
	}

	.text_15 {
		// margin-bottom: 6rpx;
		color: #999999;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		// line-height: 28rpx;
	}

	.text_16 {
		margin-top: 6rpx;
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.group_12 {
		padding-bottom: 35rpx;
		border-bottom: solid 1rpx #eeeeee;
	}

	.group_13 {
		padding-top: 26rpx;
	}

	.text_22 {
		margin-bottom: 6rpx;
		color: #999999;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 28rpx;
	}

	.text_23 {
		margin-left: 40rpx;
		color: #333333;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 28rpx;
	}
		.copy {
			// margin-left: 192rpx;
			width: 190rpx;
			display: flex;
			justify-content: flex-end;
		}
	.text_25 {
		margin-bottom: 6rpx;
		color: #999999;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 28rpx;
	}

	.text_26 {
		margin-left: 40rpx;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 28rpx;
	}

	.text_17 {
		margin-bottom: 6rpx;
		color: #999999;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.text_18 {
		margin-top: 6rpx;
		color: #191919;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.text_19 {
		margin: 14rpx 16rpx 0rpx 0;
		color: #999999;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 28rpx;
	}

	.group_14 {
		height: 38rpx;
	}

	.text_20 {
		color: #fe641a;
		font-size: 20rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 23rpx;
	}

	.text_21 {
		color: #fe641a;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 38rpx;
	}
</style>
